<script setup>
import { fetchNowData, fetchAirData, fetchIndicesData } from '@/api/weatherAPI';
import { computed, ref, watch } from 'vue'
//引入和风天气图标
import 'qweather-icons/font/qweather-icons.css'
//引入dayjs日期库
import dayjs from 'dayjs';
//引入状态管理
import { useCityStore } from '../stores/cityStore';
//获取store实例
const cityStore = useCityStore()

//声明响应式数据
const nowData = ref({}) //对应res中的now属性
const updateTime = ref('')//对应res中的udpateTime属性
const airData = ref({})//声明空气质量的响应式数据
const indicesData = ref({})

watch(
    () => cityStore.location,
    () => {
        getData(cityStore.location.id)
    },
    { immediate: true }
)

//初始调用getData
//  getData (cityStore.location.id)
//网络请求,异步获取api数据并进行处理
async function getData(locationID) {
    const res = await fetchNowData(locationID) //获取实时天气数据
    //    console.log(res);//实时天气数据
    nowData.value = res.now//响应式数据存放后端api的数据
    updateTime.value = dayjs(res.updateTime).format('YYYY-MM-DD HH:mm')

    const resAir = await fetchAirData(cityStore.location.lat, cityStore.location.lon)//获取到实时空气质量数据
    console.log(resAir);//实时空气质量数据
    airData.value = resAir.indexes[0]
    //获取紫外线指数
    const resIndices = await fetchIndicesData(locationID, 5)
    console.log(resIndices)
    indicesData.value = resIndices.daily[0]
}

//计算属性，通过空气质量的aqi转换为对应的文本信息
const airText = computed(() => {
    let aqi = airData.value.aqi
    let text
    if (aqi <= 50) {
        text = "优"
    } else if (aqi <= 100) {
        text = "良"
    } else if (aqi <= 150) {
        text = "轻度污染"
    } else if (aqi <= 200) {
        text = "中度污染"
    } else if (aqi <= 300) {
        text = "重度污染"
    } else if (aqi <= 500) {
        text = "严重污染"
    }
    return text
})

</script>
<template>
    <div class="now">
        <div class="top">
            <span>{{ cityStore.location.name }}</span>
            <span>{{ updateTime }}</span>
        </div>
        <div class="mid">
            <div class="air">
                <p>AQI{{ airText }}</p>
            </div>
            <div class="weather">
                <!-- 模块字符串解决字符串常量和变量的拼接 -->
                <i :class="`qi-${nowData.icon} `"></i>
                <div>
                    <p> {{ nowData.temp }}</p>
                    <p> {{ nowData.text }}</p>
                </div>
            </div>
            <div class="text"></div>
        </div>
        <div class="bottom">
            <div>
                <p>{{ nowData.windScale }}级</p>
                <p>{{ nowData.windDir }}</p>
            </div>
            <div>
                <p>{{ nowData.humidity }}%</p>
                <p>相对湿度</p>
            </div>
            <div>
                <p>{{ indicesData.category }}</p>
                <p>紫外线</p>
            </div>
            <div>
                <p>{{ nowData.feelsLike }}°</p>
                <p>体感温度</p>
            </div>
            <div>
                <p>{{ nowData.vis }}km</p>
                <p>能见度</p>
            </div>
            <div>
                <p>{{ nowData.precip }}mm</p>
                <p>降水量</p>
            </div>
            <div>
                <p>{{ nowData.pressure }}hPa</p>
                <p>大气压</p>
            </div>
        </div>
    </div>
</template>

<style scoped>
.now {
    width: 100%;
    background-color: antiquewhite;
    border-radius: 1rem;
    padding: 1rem 0;
}

.now .top {
    padding: 1rem;
    overflow: hidden;
}

.now .top>span:nth-last-of-type(1) {
    float: right;
}

.weather {
    display: flex;
    align-items: center;
    /* 垂直居中 */
    justify-content: center;
    /* 水平居中 */
}

.weather>i {
    font-size: 3rem;
    margin-right: 1rem;
}

.weather>div>p:nth-of-type(1) {
    font-size: 2rem;
}

.weather>div>p:nth-of-type(2) {
    font-size: 1rem;
}

.bottom {
    width: 80%;
    margin: 0 auto;
    background-color: #dcdfe9;
    border-radius: 1rem;
    padding: 1rem;
    display: flex;
    justify-content: space-between;
}

.air {
    overflow: hidden;
    /*清除浮动*/
}

.air>p {
    text-align: center;
    width: 6rem;
    height: 2rem;
    line-height: 2rem;
    background-color: #a9a538;
    border-radius: 1rem;
    color: white;
    float: right;
}
</style>